<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c1" height="800" width="800">
        你的浏览器不支持canvas
    </canvas>

    <script>
        // 1. 找到画布对象
        let c1 = document.getElementById('c1');
        let context = c1.getContext('2d');

        // moveTo可以用来让绘制点隐形的移动，不留下痕迹。利用这一点，我们就可以少些很多代码。比如我们之前每次绘制，画完一笔就要closePath(),然后下一笔再beginPath()。不过moveTo()需要计算好落点，务必小心计算(特别是画圆弧的时候)。要不然到时候画出来的东西会笑死你

        // 画笑脸
        context.beginPath();
        context.arc(75, 75, 50, 0, Math.PI*2);
        context.moveTo(95,85);
        
        // 画嘴巴
        context.arc(75, 85, 20, 0, Math.PI);
        context.moveTo(60,60);
                
        // 画左边眼睛
        context.arc(55, 60, 5, 0, Math.PI*2);
        context.moveTo(95,60);
                
        // 画右边眼睛
        context.arc(90, 60, 5, 0, Math.PI*2);

        context.stroke();
        context.closePath();
        
    </script>
</body>
</html>